<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>computed</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<br>
<div id="example">
    <input v-model="message">
    <br/>
    {{message.split('').reverse().join('')}}
</div>
<hr></br>
<div id="example1">
    <p>Original message:"{{message}}"</p>
    <p>Computed reversed message:"{{reverseMessage}}"</p>
</div>
<hr></br>
<div id="demo">
    {{fullName}}
</div>
<hr>
<div id="demo1">
    {{fullName}}
</div>
<hr>
<div id="demo2">
    {{fullName}}
</div>
<hr>

<div id="watch-example">
    <p>
        Ask a yes/no question:
        <input v-model="question">
    </p>
    <p>{{answer}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#example',
        data:{
            message:"ABCDEFG"
        }
    })
    var new_vm = new Vue({
        el:'#example1',
        data:{
            message: 'Hello'
        },
        computed:{
            reverseMessage:function(){
                return this.message.split('').reverse().join('')
            }
        }
    })
    var demo =new Vue({
        el:'#demo',
        data:{
            firstName:'Foo',
            lastName:'Bar',
            fullName:'Foo Bar'
        },
        watch:{
            firstName: function(val){
                this.fullName = val +' '+this.lastName
            },
            lastName: function(val){
                this.fullName = this.firstName+' '+val
            }
        }

    })
    var demo1 = new Vue({
        el:'#demo1',
        data:{
            firstName:'Foo',
            lastName:'Bar'
        },
        computed:{
            fullName:function(){
                return this.firstName+' '+this.lastName
            }
        }
    })
    var demo2 = new Vue({
        el:'#demo2',
        data:{
            firstName:'Foo',
            lastName:'Bar',
        },
        computed:{
            fullName:{
                get:function(){
                    return this.firstName+' '+this.lastName
                },
                set:function(newValue){
                    var names = newValue.split(' ')
                    this.firstName = names[0]
                    this.lastName = names[names.length-1]
                }
            }
        }
    })
</script>
<script>
    var watchExampleVM = new Vue({
        el:'#watch-example',
        data:{
            question:'',
            answer:'I cannot give you an answer until you ask a question!'
        },
        watch:{
            question:function(newQuestion,oldQuestion){
                this.answer = 'Waiting for you to stop typing...'
                this.debouncedGetAnswer()
            }
        },
        created:function(){
            this.debouncedGetAnswer = _.debounce(this.getAnswer,500)
        },
        methods:{
            getAnswer:function(){
                if(this.question.indexOf('?')===-1){
                    this.answer = 'Question usually contain a question mark.;-'
                    return
                }
                this.answer = 'Thinking...'
                var vm = this
                axios.get('https://yesno.wtf/api')
                      .then(function(response){
                        vm.answer = _.capitalize(response.data.answer)
                      })
                      .catch(function(error){
                        vm.answer='Error! Could not reach the API.'+error
                      })
            }
        }
    })

</script>
</html>